<template>
    <el-table :data="supplies" height="600" style="width: 100%" border v-loading="loading">
        <el-table-column 
            fixed="left"
            prop="id"
            label="ID"
            width="80px">
        </el-table-column>
        <el-table-column 
            prop="name"
            label="标题"
            width="100px">
        </el-table-column>
        <el-table-column 
            prop="type"
            label="种类"
            width="200px">
        </el-table-column>
        <el-table-column 
            prop="size"
            label="规格"
            width="100px">
        </el-table-column>
        <el-table-column 
            prop="origin"
            label="原产地"
            width="100px">
        </el-table-column>
        <el-table-column 
            prop="trad_place"
            label="原产地"
            width="100px">
        </el-table-column>
        <el-table-column 
            prop="price"
            label="价格"
            width="100px">
        </el-table-column>
        <el-table-column 
            prop="unit"
            label="单位"
            width="100px">
        </el-table-column>
        <el-table-column 
            prop="rec"
            label="是否推荐"
            width="100px">
        </el-table-column>
        <el-table-column 
            prop="detail_text"
            label="详情文字描述"
            width="400px">
        </el-table-column>
        <el-table-column 
            prop="thumb"
            label="缩略图"
            width="150px">
            <template #default="scope">
                <img :src="scope.row.thumb" style="object-fix: contain; height: 100px">
            </template>
        </el-table-column>
        
        <el-table-column 
            fixed="right"
            label="操作"
            width="150px">
            <template #default="scope">
                <el-button type="text" size="small" @click="handleEdit(scope)">修改</el-button>
                <el-button type="text" size="small" @click="handleDel(scope)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="prev, pager, next"
        :total="count">
    </el-pagination>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { adminSupply } from '@/api/content.js'
export default {
    name: "SupplyTable",
    data(){
        return {
            currentPage: 1
        }
    },
    methods: {
        ...mapMutations('as', [
            'getSupplies',
            'setEditSupply',
            'setLoading',
            'spliceSupply'
        ]),
        async handleEdit(scope){
            await this.setEditSupply(scope);
        },
        async handleDel(scope){
            console.log('id', scope.row.id)
            this.setLoading(true)
            await adminSupply.del(scope.row.id)
            this.setLoading(false)
            this.$message({
                showClose: false,
                type: 'success',
                message: '删除成功'
            })
            this.spliceSupply(scope.index_);
        },
        handleSizeChange(){
            
        },
        handleCurrentChange(page){
            this.getSupplies(page);
        }

    },
    computed: {
        ...mapState('as', [
            'supplies',
            'count',
            'loading'
        ])
    },
    mounted(){
        this.getSupplies(1);
    }
}
</script>

<style lang="scss" scoped>
.el-table {
    /deep/ .el-table__body-wrapper {
        overflow: auto !important;
    }
}
</style>